經過前兩天的介紹，我對於 SCSS 編譯成 CSS 也有了比較概略的認識了，但在開發的時候不同的開發者所習慣的 CSS 順序也不盡相同，甚至是自己在寫的時候也會有不一致的時候。

一般來說推薦的順序會是：
Standard

.selector {
    /* Positioning */
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Display & Box Model */
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #333;
    margin: 10px;

    /* Other */
    background: #000;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    text-align: right;
    opacity: 0.7;
    transition: all 0.3s;
    /* ... */
}

雖然已經習慣了定位、盒模型、顏色、transform、動畫...等等，由上到下的順序，但在寫的時候還是會時常：

欸...這個 width 是要放在 height 上面還是下面？max-height 跟 height 呢？啊...padding...是要在 margin 上面還是下面咖賀？position 跟 display ㄋ...

然後寫了一下覺得不對就去調個位置（loop）而在不知不覺中浪費了時間。

為此，今天要使用一個能統一 CSS 撰寫風格、樣式順序的好東西：Stylelint

npm install

如同 SCSS 的安裝一樣，我們可以照著官方網站所提供的文件來進行安裝。

1. 安裝 stylelint 與 stylelint 的標準設定檔
   npm install --save-dev stylelint stylelint-config-standard

   // package.json
   {
     "devDependencies": {
       "stylelint": "^14.12.0",
       "stylelint-config-standard": "^28.0.0"
     }
   }
   

2. 建立 .stylelintrc.json 這個檔案（前面有一個 . 要記得），並將下面這行給貼上

   {
     "extends": "stylelint-config-standard"
   }
   

3. 在你所有的 css 檔案中執行 stylelint
   npx stylelint "**/*.css"
   這樣就會將不符合 stylelint-config-standard 的結果都列出：
   
   要修正的話可以透過 npx stylelint "**/*.css" --fix 來修正。

4. 讓 stylelint 讀懂 SCSS
   如果我們想對 SCSS 的檔案進行修正而輸入 npx stylelint "**/*.scss" --fix 的話，會出現下列的訊息：

   npx stylelint "**/*..scss" --fix
   css/input.scss: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option

   告訴我們要讓 stylelint 看懂 CSS 以外的格是的話還需要安裝其他東西。
   在這邊會去安裝 stylelint-config-sass-guidelines

   輸入：npm i -D stylelint postcss stylelint-config-sass-guidelines
   安裝完成後，在 .stylelintrc.json 新增 stylelint-config-sass-guidelines 這個規則：

   {
     "extends": [
       "stylelint-config-standard",
       "stylelint-config-sass-guidelines"
     ]
   }
   

   再次輸入 npx stylelint "**/*.scss" --fix 的話，就可以得到重新排序後的 SCSS 了！

參考

stylelint user-guide
25 - Stylelint - Lint CSS 程式碼
Vue.js - 使用 StyleLint 來整理 CSS 吧！